<template>
	<view id="app">
		<!-- 功能区 -->
		<view class="fnArea ptb30 plr30 bw">
			<!-- 搜索框 -->
			<view class="search oh rows ais br100">
				<view class="input df aic ptb10 plr30 f1 lh60">
					<view class="icon">
						<uni-icons type="search" size="20" color="#999"></uni-icons>
					</view>
					<view class="txt ml10 f1">
						<input type="text" v-model="keywrods" placeholder="申请人姓名" placeholder-class="pls"
							@confirm="search" />
					</view>
				</view>
				<view class="tap w150 df aic tac cw f28 bffae65" @click="search">
					<view class="w100p">筛选</view>
				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<scroll-view scroll-X class="navBar" enable-flex>
			<view class="nav" :class="index == current ? 'active' : ''" v-for="(item,index) in topNav" :key="index"
				@click="change(index)">
				<view class="item">
					<view class="txt">{{item.name}}</view>
					<view class="line"></view>
				</view>
			</view>
		</scroll-view>

		<!-- 列表 -->
		<view class="order mlr30 mt30">

			<!-- 订单列表 -->
			<view class="list area mb30 pt10 plr25" @click="toDetail(item)" v-for="(item,index) in wrap.list"
				:key="index">
				<!-- 上 -->
				<view class="top rows ptb15 bdb1se f28">
					<!-- 用户信息 -->
					<view class="user df aic">
						<view class="avatar wh40">
							<image :src="item.userData.avatar" mode="aspectFill"></image>
						</view>
						<view class="name ml10 thd c333 f28">{{item.userData.nickname}}</view>
					</view>
					<!-- 订单状态 -->
					<view class="state c333">{{item.status_text}}</view>
				</view>
				<!-- 内容 -->
				<view class="mid df ais ptb20 bdb1se">
					<!-- 商品图片 -->
					<view class="proImg img180">
						<image :src="item.goodsData.images[0]" mode="aspectFill" lazy-load></image>
					</view>
					<!-- 商品信息 -->
					<view class="proInfo df dfc dfsb oh ml20 f1">
						<!-- 商品名称 -->
						<view class="title t2hd c333 f32">{{item.goodsData.name}}</view>
						<!-- 申请时间 -->
						<view class="time c999 f28">申请时间：{{item.createtime}}</view>
						<!-- 价格 -->
						<view class="price cFF9646 f28">￥{{item.goodsData.price}}</view>
					</view>
				</view>

				<!-- 功能区 -->
				<view class="botFn df dfr ptb20" v-if="item.status == 1">
					<view class="mr30">
						<view class="btn cancel w150">查看详情</view>
					</view>
					<view class="mr20">
						<view class="btn cancel w150" @click.stop="target = index;cancel()">取消合作</view>
					</view>
					<view>
						<view class="btn prmary w150" @click.stop="target = index;$refs.fanli.open()">确认合作</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else-if="item.status == 2">
					<view class="mr30">
						<view class="btn cancel w150">查看详情</view>
					</view>
					<view>
						<view class="btn prmary w200" @click.stop="target = index;$refs.fanli.open()">修改返利比例</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else-if="item.status == 3">
					<view class="mr30">
						<view class="btn cancel w150">查看详情</view>
					</view>
					<view>
						<view class="btn prmary w150" @click.stop="target = index;castoff()">解除合作</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else>
					<view>
						<view class="btn prmary w150">商品详情</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品返利比例 -->
		<uni-popup ref="fanli" type="center">
			<view class="popMid pt30">
				<!-- 标题 -->
				<view class="title c000 f30">商品返利比例</view>
				<!-- 编辑 -->
				<label class="edit rows w70p mauto mt50 pb10 bdb1se">
					<view class="img wh30">
						<image src="/static/1706.png" mode="aspectFit"></image>
					</view>
					<view class="f1">
						<input type="digit" v-model="backVal" />
					</view>
				</label>
				<!-- 按钮 -->
				<view class="fnArea rows mt50 lh100 bdt1sE f34">
					<view class="f1 bdr1se c999" @click="$refs.fanli.close()">取消</view>
					<view class="f1" @click="confirm">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				// 关键字
				keywrods: '',
				// tab
				topNav: [{
						status: '',
						name: '全部',
					},
					{
						status: '1',
						name: '待处理',
					},
					{
						status: '2',
						name: '待合作',
					},
					{
						status: '3',
						name: '合作中',
					},
					{
						status: '4,5,6',
						name: '已结束',
					},
				],
				// 下标
				current: 0,
				// 内容
				wrap: {
					// 页码
					page: 1,
					// 列表
					list: [],
					// 是否加载
					ifLoad: false,
				},
				// 下标
				target: '',
				// 返利的值
				backVal: '',
				pays:false,
				pays2:false
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 判断类型
			if (e.type) {
				// 赋值下标
				that.current = Number(e.type) - 1;
			}

			// 判断用户名称
			if (e.nickname) {
				// 赋值名称
				that.keywrods = e.nickname
			}
		},

		// 页面出现
		onShow() {
			that.wrap.page = 1;

			// 订单列表
			that.order_list();
		},

		// 页面触底
		onReachBottom() {
			// 判断是否可以加载
			if (that.wrap.ifLoad) {
				// 增加页码
				that.wrap.page++;

				// 订单列表
				that.order_list();
			}
		},

		// 方法集
		methods: {
			// 解除合作
			castoff() {
				if(!that.pays2){
					wx.requestSubscribeMessage({ // 调起消息订阅界面
						tmplIds: [
							'tEw5XboM7JQYu7YXGhn6glwAtfE1TT_4UU-Wo5ckiU8'
						], //新增合伙人 
						success(res) {
							console.log('订阅消息 成功 ');
							console.log(res);
							that.pays2 = true
						},
						fail(er) {
							console.log("订阅消息 失败 ");
							console.log(er);
							that.pays2 = true
						}
					})
				}
				if(that.pays2){
					// 弹窗提示
					that.alert({
						value: '解除之后则该用户的所有下级人员或将无法购买该商品，确认要解除合作吗？',
						success(rs) {
							// 点击确定
							if (rs.confirm) {
								// 新建对象
								var obj = {
									// 订单状态
									status: 4,
									// 商家接触合作时间
									sell_time: Date.parse(new Date()) / 1000,
								}
					
								// 改变状态
								that.util.changeStatus(obj, that);
							};
						},
					});
				}
			
			},

			// openMsg() {
			// 	// 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withSubscriptions   这个参数获取用户是否打开订阅消息总开关。后面我们需要获取用户是否同意总是同意消息推送。所以这里要给它设置为true 。
			// 	wx.getSetting({
			// 		withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
			// 		success: function(res) {
			// 			console.log('用户统一的', res.subscriptionsSetting.itemSettings);
			// 			// 调起授权界面弹窗
			// 			if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
			// 				// 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
			// 				wx.requestSubscribeMessage({ // 调起消息订阅界面
			// 					tmplIds: [
			// 						'tEw5XboM7JQYu7YXGhn6glwAtfE1TT_4UU-Wo5ckiU8',
			// 					], //收到合作  //解除合作   
			// 					success(res) {
			// 						console.log('订阅消息 成功 ');
			// 						console.log(res);
			// 						this.pays=true
			// 					},
			// 					fail(er) {
			// 						console.log("订阅消息 失败 ");
			// 						console.log(er);
			// 						this.pays=true
			// 					}
			// 				})


			// 			} else {
			// 				console.log('订阅消息未开启')
			// 			}
			// 		},
			// 		fail: function(error) {
			// 			console.log(error);
			// 		},
			// 	})
			// },
			// 确定
			confirm() {
				if (!that.pays) {
					wx.requestSubscribeMessage({ // 调起消息订阅界面
						tmplIds: [
							'bGxPDx0eJax7TvQAonOxXg0ixv8VD1bh-K8jPcIuFqY',
						], //新增合伙人 
						success(res) {
							console.log('订阅消息 成功 ');
							console.log(res);
							that.pays = true
						},
						fail(er) {
							console.log("订阅消息 失败 ");
							console.log(er);
							that.pays = true
						}
					})
				}
				if(that.pays){
					// 判断是否填写为空
					if (!that.backVal) {
						// 弹窗提示
						that.alert('请输入返利比例');
						return;
					}
					if (that.backVal>=100) {
						// 弹窗提示
						that.alert('反水比例不可大于100%');
						that.backVal=''
						return;
					}
					
					// 新建对象
					var obj = {
						// 订单状态
						status: 3,
						// 返利比例
						ratio: that.backVal,
						// 异议状态
						state: 1,
					};
					
					// 关闭弹窗
					that.$refs.fanli.close();
					
					// 改变状态
					that.util.changeStatus(obj, that, () => {}, true);
				}
				
			},

			// 取消合作
			cancel() {
				if(!that.pays2){
					wx.requestSubscribeMessage({ // 调起消息订阅界面
						tmplIds: [
							'tEw5XboM7JQYu7YXGhn6glwAtfE1TT_4UU-Wo5ckiU8'
						], //新增合伙人 
						success(res) {
							console.log('订阅消息 成功 ');
							console.log(res);
							that.pays2 = true
						},
						fail(er) {
							console.log("订阅消息 失败 ");
							console.log(er);
							that.pays2 = true
						}
					})
				}
				if(that.pays2){
					
				}
				// 弹窗提示
				that.alert({ 
					value: '确认取消订单？',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 新建对象
							var obj = {
								status: 6,
							};

							// 改变状态
							that.util.changeStatus(obj, that);
						}
					}
				});
			},

			// 订单列表
			order_list() {
				// 变量
				var wrap = that.wrap;

				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: {
						table: 'promote',
						// 订单状态
						status: that.topNav[that.current].status,
						// 页
						page: wrap.page,
						// 条
						count: 10,
						// 用户名
						nickname: that.keywrods,
						sell_user: true,
					},
					// 加载
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 判断页码
							if (wrap.page == 1) {
								// 清空列表
								that.wrap.list = [];
							}

							// 赋值列表
							wrap.list.push(...rs.data);

							// 判断数据是否可以加载
							if (rs.data[9]) {
								wrap.ifLoad = true;
							} else {
								wrap.ifLoad = false;
							}

							// 赋值内容
							that.wrap = wrap;
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 搜索
			search() {
				// 判断有无内容
				if (!that.keywrods) {
					// 弹窗提示
					that.alert('请输入搜索内容');
					return;
				}

				// 获取订单列表
				that.order_list();
			},

			// 切换条件
			changeType(e) {
				// 赋值下标
				that.ti = e.detail.value;
			},

			// 切换下标
			change(index) {
				// 判断是否相等
				if (that.current == index) {
					return;
				}

				// 赋值下标
				that.current = index;

				// 订单列表
				that.order_list();
			},

			// 跳转详情
			toDetail(item) {
				// 跳转页面
				uni.navigateTo({
					url: '/pages/my/shop/tuidetail?type=2&id=' + item.id,
				})
			},
		},
	};
</script>
<style lang="less">
	@active: #FFA351;

	// 头部
	.search {

		// 输入
		.input {
			background-color: #F6F7F8;
		}
	}

	// 导航条
	.navBar {
		display: flex;
		height: 100rpx;
		white-space: nowrap;
		background-color: white;

		// 导航块
		.nav {
			display: inline-block;
			flex: 1;
			text-align: center;

			// 内容
			.item {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				padding: 20rpx 30rpx;

				// 文字
				.txt {
					color: #666;
					font-size: 30rpx;
					transition: .3s;
				}

				// 线
				.line {
					width: 0;
					height: 10rpx;
					margin: 15rpx auto 0;
					background-color: @active;
					border-radius: 100rpx;
					transition: .3s;
				}
			}
		}

		// 激活
		.active {

			// 项
			.item {

				// 文字
				.txt {
					color: @active;
				}

				// 线
				.line {
					width: 100%;
				}

			}
		}
	}

	// 订单
	.order {

		// 按钮
		.btn {
			padding-top: 15rpx;
			padding-bottom: 15rpx;
		}
	}
</style>
